<template>
  <!--外层的容器-->
  <el-container>

    <!--上半区域: 顶栏-->
    <el-header class="layout-header">
      <h1>酷鲨商城运营管理平台</h1>
    </el-header>

    <!--下半区域-->
    <el-container class="layout-body">
      <!--下半区域：左侧边栏-->
      <el-aside class="layout-aside">
        <!--左侧菜单列表-->
        <el-menu
            router
            :default-active="$router.currentRoute.path"
            class="el-menu-vertical-demo"
            background-color="#222"
            text-color="#fff"
            active-text-color="#ffd04b">
          <!--首页-->
          <el-menu-item index="/sys-admin/temp/index">
            <i class="el-icon-s-home"></i>
            <span>首页</span>
          </el-menu-item>

          <!--临时页面-->
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>临时页面</span>
            </template>
            <el-menu-item index="/sys-admin/temp/admin/add-new">
              <i class="el-icon-circle-plus"></i>
              <span>添加管理员</span>
            </el-menu-item>
            <el-menu-item index="/sys-admin/temp/admin/list">
              <i class="el-icon-s-operation"></i>
              <span>管理员列表</span>
            </el-menu-item>
            <el-menu-item index="/sys-admin/temp/brand/add-new">
              <i class="el-icon-circle-plus"></i>
              <span>添加品牌</span>
            </el-menu-item>
            <el-menu-item index="/sys-admin/temp/brand/list">
              <i class="el-icon-s-operation"></i>
              <span>品牌列表</span>
            </el-menu-item>
            <el-menu-item index="/sys-admin/temp/category/add-new">
              <i class="el-icon-circle-plus"></i>
              <span>添加类别</span>
            </el-menu-item>
            <el-menu-item index="/sys-admin/temp/category/list">
              <i class="el-icon-s-operation"></i>
              <span>类别列表</span>
            </el-menu-item>
            <el-menu-item index="/sys-admin/temp/album/add-new">
              <i class="el-icon-circle-plus"></i>
              <span>添加相册</span>
            </el-menu-item>
            <el-menu-item index="/sys-admin/temp/album/list">
              <i class="el-icon-s-operation"></i>
              <span>相册列表</span>
            </el-menu-item>
            <el-menu-item index="/sys-admin/temp/attribute-template/add-new">
              <i class="el-icon-circle-plus"></i>
              <span>添加属性模板</span>
            </el-menu-item>
            <el-menu-item index="/sys-admin/temp/attribute-template/list">
              <i class="el-icon-s-operation"></i>
              <span>属性模板列表</span>
            </el-menu-item>
            <el-menu-item index="/sys-admin/temp/attribute/add-new">
              <i class="el-icon-circle-plus"></i>
              <span>添加属性</span>
            </el-menu-item>
            <el-menu-item index="/sys-admin/temp/attribute/list">
              <i class="el-icon-s-operation"></i>
              <span>属性列表</span>
            </el-menu-item>
          </el-submenu>

          <!--商品管理-->
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-goods"></i>
              <span>商品管理</span>
            </template>
            <el-menu-item index="3-1" disabled>
              <i class="el-icon-s-grid"></i>
              <span>SPU台账</span>
            </el-menu-item>
            <el-menu-item index="3-2" disabled>
              <i class="el-icon-circle-plus"></i>
              <span>新增SPU</span>
            </el-menu-item>
            <el-menu-item index="3-3" disabled>
              <i class="el-icon-picture"></i>
              <span>相册管理</span>
            </el-menu-item>
            <el-menu-item index="3-4" disabled>
              <i class="el-icon-s-operation"></i>
              <span>品牌类别</span>
            </el-menu-item>
            <el-menu-item index="3-5" disabled>
              <i class="el-icon-s-flag"></i>
              <span>属性模板</span>
            </el-menu-item>
            <el-menu-item index="3-6" disabled>
              <i class="el-icon-s-data"></i>
              <span>品牌管理</span>
            </el-menu-item>
          </el-submenu>

          <!--商品管理-->
          <el-menu-item index="4" disabled>
            <i class="el-icon-menu"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>

          <!--营销管理-->
          <el-menu-item index="5" disabled>
            <i class="el-icon-s-order"></i>
            <span slot="title">营销管理</span>
          </el-menu-item>

          <!--商家管理-->
          <el-menu-item index="6" disabled>
            <i class="el-icon-s-shop"></i>
            <span slot="title">商家管理</span>
          </el-menu-item>

          <!--权限管理-->
          <el-menu-item index="7" disabled>
            <i class="el-icon-s-custom"></i>
            <span slot="title">权限管理</span>
          </el-menu-item>

        </el-menu>
      </el-aside>
      <!--下半区域：右侧主体-->
      <el-main class="layout-main">
        <!--设置此位置为通过路由进行注入视图组件-->
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
  <!--  <div>
      <img alt="Vue logo" src="../assets/logo.png">
  &lt;!&ndash;通过下列导入helloWorld.vue文件，并且声明后，就可以通过标签的形式引用此视图组件
      其中msg属性就是，helloWOrld.vue文件中声明的属性，类似与方法的参数
      可以通过给此属性传递信息，来达到让helloworld。vue视图中显示我们传递过去的信息&ndash;&gt;
      <HelloWorld msg="此处引入了HelloWord变迁.js App"/>
    </div>-->
</template>

<style>

.layout-header {
  /*边框线条：测试用的*/
  /*border: chocolate ridge 5px;*/
  background: #2c3e50;
  color: aliceblue;
}

.layout-header h1 {
  /*设置行高*/
  line-height: 60px;
}

.layout-body {
  /*设置为绝对定位*/
  position: absolute;
  /*通过设置上下左右的距离位置，来设置具体显示位置和显示方式*/
  left: 0px; /*紧贴左侧 紧贴左侧*/
  right: 0px; /*距离右侧0px 紧贴右侧*/
  top: 60px; /*距离顶部60px */
  bottom: 0px; /*距离底部0px 紧贴底部，通过以上设置来设计此布局的大小*/
  /*border: #2c3e50 ridge 5px;*/
}

.layout-aside {
  /*border: #42b983 ridge 5px;*/
  background: #222;
}

.layout-aside i {
  /*border: #42b983 ridge 5px;*/
  /*!important 最高优先级,用来避免出现eui框架优先级的问题*/
  color: #fff !important;
}

.layout-main {
  background: #fff;
  border: blueviolet ridge 5px;
}

/*设置选择菜单时的背景，此id选择器名称是由eui框架提供的*/
.el-menu-item.is-active {
  background: #2c3e50 !important;
}
</style>

<script>
/*// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}*/
</script>
